<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title>User Profile</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
    <#include "/include/new_resource.html"/>
    <style>
        .uploadFile {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 2;
        }
        .img .t1{
            text-align: center;
            color: #9D9D9D;
            font-size: 14px;
        }
        .img{
            border: 2px dashed #ccc;
            text-align: center;
            border-radius: 8px;
        }
        .summary-box .bd .information .stetup-photos {
            margin-right: 50px;
            padding-right:0px;
            width: 350px;
        }
        .summary-box .bd .information .stetup-photos .photos-wrap {

            height: 350px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="summary-box">
        <div class="hd">
            <h3>Summary</h3>
            <div class="btns g-button-wrap">
                <button class="back" type="button" onclick="history.back();">Back</button>
                <button class="create-button" type="button" onclick="$('#userViewForm').submit()">Save</button>
            </div>
        </div>
        <div class="bd">
            <form id="userViewForm" role="form" action="${base}/admin/userView/save" method="post">
                <input type="hidden" name="id" value="${(userView.id?c)!}">
                <div class="information item">
                    <div class="title g-title">
                        <h3>Profile</h3>
                    </div>
                    <div class="content">
                        <div class="stetup-photos">
                            <div class="photos-wrap">
                                <div class="img">
                                    <p class="t1">Click here to upload Image</p>
                                    <input type="file" class="uploadFile" name="mainFile" accept="image/*"
                                           id="mainUpload" multiple="">
                                    <input type="hidden" name="profilePhoto" id="mainUploadImgInput" value="${userView.profilePhoto!}">
                                    <img src="${base}${userView.profilePhoto!}" style="width: 300px;height: 300px;" id="mainUploadImg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="g-parameter">
                                <ul>
                                    <li>
                                        <div class="tit">
                                            ID  ${userView.id!}
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            LoginName
                                        </div>
                                        <div class="content">
                                            <div class="input-box">
                                                <input type="text" class="required" name="userName" value="${userView.userName!}"
                                                       placeholder="Enter loginname"/>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Name
                                        </div>
                                        <div class="content">
                                            <div class="input-box">
                                                <input type="text" class="required" name="name" value="${userView.name!}"
                                                       placeholder="Enter  name"/>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Email
                                        </div>
                                        <div class="content">
                                            <div class="input-box">
                                                <input type="text" class="required" name="email" value="${userView.email!}"
                                                       placeholder="Enter emial"/>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Password
                                        </div>
                                        <div class="content">
                                            <div class="input-box">
                                                <input type="password" class="required" name="password" value="${userView.password!}"
                                                       placeholder="Enter password"/>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Note
                                        </div>
                                        <div class="content">
                                            <div class="input-box">
                                                <input type="text" name="memo" value="${userView.memo!}"
                                                       placeholder="Enter note"/>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 遮罩层 -->
<div class="shade"></div>
<#include "/include/new_js_resource.html"/>
<script type="text/javascript">
    let baseUrl = '${base}';

    function save() {
        HF.ajaxFormSubmit('userViewForm', function (result) {
            HF.Alert("Save Success");
            if ('${actionType!}' == 'user') {
                HF.goto("${base}/admin/userView/list");
            }
            // document.location.reload();
        }, function (e) {
            HF.Alert("Save Failure!"+(e&&e.responseText?e.responseText:''));
        });
    }


    $(function() {
        $(".scrollBox").scrollBar();
        $("#userViewForm").validate({
            submitHandler:function(form){
                save();
            }
        });
        $('#mainUpload').on('change', function(e) {
            var imgSize = this.files[0].size;
            if (imgSize > 1024 * 1024 * 20) {
                return HF.Alert("Upload images should not exceed 20M");
            };
            if (this.files[0].type != 'image/png' && this.files[0].type != 'image/jpeg' && this.files[0].type != 'image/gif') {
                return HF.Alert("Incorrect picture upload format");
            }
            pushImg();
        });
    });



    function pushImg() {
        var url = '${base}'+ "/admin/parameters/mainImgeUpload";
        var files = $("#mainUpload").get(0).files[0]; //获取file控件中的内容
        var fd = new FormData();
        fd.append("uploadFile", files);
        $.ajax({
            type: "POST",
            contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
            processData: false, //必须false才会自动加上正确的Content-Type
            url: url,
            data: fd,
            success: function (msg) {

                var obj = eval('(' + JSON.stringify(msg) + ')');

                if(obj.SUCESS){
                    let url =  '${base}'+obj.DATA;
                    //填充图片
                    $("#mainUploadImg").attr("src", url);
                    //写入隐藏域
                    $("#mainUploadImgInput").val(obj.DATA);
                }
            },
            error: function (msg) {
                //debugger;
                HF.Alert("error");
            }
        });
    }
</script>
</body>

</html>




